<!doctype html>
<html dir="ltr">

<head>
  <title>TinyMCE Accessibility Plugin Demo</title>
  <style>
    body {
      width: 900px;
      margin: 2em auto;
      background-color: #eee;
    }

    .mce-i-a11y:before {
      content: "\e900";
    }
  </style>
</head>

<body>
  <div class="main">
    <h1>TinyMCE Accessibility Plugin Demo</h1>
    <div id="editor1">
      <textarea id="textarea1">
          <h1>Test Document</h1>
          <h4>the document for testing</h4>
          <img src="http://placekitten.com/640/480" width="300" />
          <table width="100%">
            <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          </table>
          <img src="https://canvas.instructure.com/images/login/canvas-logo@2x.png" alt="canvas-logo@2x.png" width="300" />
          <p style="color: #ccc">
            Fusce id ligula rhoncus, consequat augue aliquam, sagittis ligula.
            Morbi euismod rutrum dignissim. Ut sed elementum mi. Pellentesque
            condimentum nisl non eros pretium, ut pharetra urna sodales.
          </p>
          <a href="https://en.wikipedia.org/wiki/Free_to_Choose">
            <img src="https://placekitten.com/480/640" width=300px alt="you are free"/>
          </a>
          <a href="https://en.wikipedia.org/wiki/Free_to_Choose">You are Free!</a>
          <img src="https://imgs.xkcd.com/comics/visual_field.png" alt="I recently learned something that solved a mystery that had bugged me since childhood--why, when I looked at an analog clock, the hand would sometimes seem to take a couple seconds to start ticking. Google 'stopped clock illusion'." />
          <H1>this is a really big heading tag. 51 chars long even. this is a really big heading tag. 51 chars long even. 12345678901234567890</H1>
          <p>Time for some lists!</p>
          <p>1. List item</p>
          <p>2. List item</p>
          <p>3. List item</p>
          <p>Time for some bullets!</p>
          <p> -  List item</p>
          <p>-  List item</p>
          <p>  - List item</p>
          <p>Edge cases:</p>
          <p>1. List item</p>
          <p>2. <strong>List item</strong><br>Something separated by a break</p>
          <p>3. List item</p>
          <p> - List item</p>
          <p> - List item</p>
          <p> - List item</p>
          <p>Split breaks:</p>
          <p>1. List Item<br>2. List Item</p>
          <img src="http://placekitten.com/640/480" width="300" />
        </textarea>
    </div>
    <div id="editor2">
      <textarea id="textarea2">
          <h1>this is a really big heading tag. 51 chars long even. this is a really big heading tag. 51 chars long even. 12345678901234567890</h1>
      </textarea>
    </div>
  </div>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0&features=default,Object.values,Object.entries,Object.is,Array.prototype.includes,Array.prototype.findIndex,Symbol,Symbol.iterator,String.prototype.@@iterator,Array.prototype.@@iterator,DOMTokenList.prototype.@@iterator,NodeList.prototype.@@iterator,Function.name"></script>
  <script src="demo.bundle.js"></script>
</body>

</html>
